<template>
  <card-component :content-title="contentTitle"
                  :page="page"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">

    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"></table-component>

  </card-component>

</template>


<script>
  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'

  export default {
    data() {
      return {
        programName: '',
        id: '',
        contentTitle: this.$getTextByLangKey('程序'),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },
      }
    },
    created: function () {
      this.programName = this.$route.query.programName
      this.id = this.$route.query.id
      this.contentTitle = this.programName +this.$getTextByLangKey('程序')
      this.fetchData()
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {
      fetchData: function () {
        this.tableHeader =  []
        this.tableData = []
        this.requestProgramFileList()
      },


      requestProgramFileList() {
        request.requestProgramDetail(this.id, res => {
          const {header, list} = res.data.data
          this.tableHeader = this.makeHeader(header)
          this.tableData = this.makeList(list.equis)
        })
      },

      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.fetchData()
      },

      makeHeader: function (list) {

        let indexItem = {
          type: 'index', isShow: true,
          width: '65', label: 'NO.',
        }
        var header = [indexItem]
        list.forEach(function (item) {
          item.isShow = true
          if(item.prop === 'equis.name'){
            item.prop = 'name'
          }
          if(item.prop === 'code1'||item.prop === 'code2'||item.prop === 'code3'||item.prop === 'code4'||item.prop === 'code5'||item.prop === 'feeder'){
            item.width = '220'
          }
          header.push(item)
        }, this)

        return header
      },

      makeList: function (list) {
        const posiList = []
        list.forEach(x=>{
          posiList.push(...x.posi)
        })
        var data = []
        posiList.forEach(function (item) {
          // const newItem = Object.assign(item,item.posi)
          item.name = item.equip_name
          item.codes.forEach((codeItem,index) =>{
            item['code'+(index+1)] = codeItem.code
          })
          data.push(item)
        }, this)
        return data
      },

    },
    components: {
      'table-component': table,
      'card-component': card,
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


